<template>
<div>
  <Header
    :title="title"
    @click-left="back"
  ></Header>
  <p class="list" @click="address_show = true">
    <a >所在地区</a>
    <span style="display: flex;align-items: center;">
      <input v-model="address" type="text" readonly placeholder="请选择所在地区">
      <img style="width: 7px;height: 13px;display: flex;" src="../../assets/更多灰.png" alt="">
    </span>
  </p>
  <p class="list">
    <a >详细地址</a>
    <span style="display: flex;align-items: center;width: 75%;">
      <input v-model="ADDRESS" type="text" style="width: 100%;"  placeholder="请输入详细地址">
      <img v-show="ADDRESS" @click="ADDRESS = ''" style="width: 13px;height: 13px;display: flex;"
           src="../../assets/删除.png" alt="">
    </span>
  </p>
  <div class="bottom">
    <button @click="keep">保存</button>
  </div>
  <van-popup round class="place"   v-model="address_show" position="bottom" >
    <van-area item-height="15vw" @cancel="address_show = false" @confirm="onAreaConfirm"
              title="请选择所在地区" :area-list="areaList" />
  </van-popup>
  <van-dialog v-model="keep_show"
              confirm-button-color="#1da4f2"
              @confirm="saveConfirm"
              title="确认保存该地址吗？" show-cancel-button>
  </van-dialog>
</div>
</template>

<script>
import Header from '../../components/Vue/Header'
import area from '../../components/China/area'
export default {
  name: 'AddressAdd',
  components: {
    Header
  },
  data () {
    return {
      ADDRESS_ID: this.$route.query.ADDRESS_ID,
      ADDRESS: '', // 详细地址
      PROVINCE: '', //	省
      CITY: '', //	市
      DISCRECT: '', //	区
      areaList: area,
      address_show: false,
      keep_show: false
    }
  },

  computed: {
    title () {
      if (this.ADDRESS_ID) {
        document.title = '编辑地址'
        return '编辑地址'
      } else {
        document.title = '新建地址'
        return '新建地址'
      }
    },
    address () {
      if (this.PROVINCE ||
        this.CITY || this.DISCRECT) {
        return this.PROVINCE + ' ' + this.CITY + ' ' + this.DISCRECT
      } else {
        return ''
      }
    }
  },
  mounted () {
    if (this.ADDRESS_ID) {
      this.getAddressHis()
    }
  },
  methods: {
    // 获取历史地址
    getAddressHis () {
      this.$http.detailAddress({
        ADDRESS_ID: this.ADDRESS_ID
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            console.log(res.data.data)
            let data = res.data.data
            this.ADDRESS = data.ADDRESS // 详细地址
            this.PROVINCE = data.PROVINCE //	省
            this.CITY = data.CITY //	市
            this.DISCRECT = data.DISCRECT //	区
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    keep () {
      if (!this.address) {
        this.$toast('请选择所在地区')
        return false
      } else if (!this.ADDRESS) {
        this.$toast('请输入详细地址')
        return false
      }
      this.keep_show = true
    },
    // 获取住址
    onAreaConfirm (val) {
      this.address_show = false
      // 获取地区
      const [val1, val2, val3] = val
      this.PROVINCE = val1.name
      this.CITY = val2.name
      this.DISCRECT = val3.name
    },
    saveConfirm () {
      if (this.ADDRESS_ID) {
        this.$http.updateAddress({
          ADDRESS: this.ADDRESS, // 详细地址
          PROVINCE: this.PROVINCE, //	省
          CITY: this.CITY, //	市
          DISCRECT: this.DISCRECT, //	区
          ADDRESS_ID: this.ADDRESS_ID // id
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.$toast('修改成功')
              this.back()
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.saveAddress({
          ADDRESS: this.ADDRESS, // 详细地址
          PROVINCE: this.PROVINCE, //	省
          CITY: this.CITY, //	市
          DISCRECT: this.DISCRECT //	区
        })
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.$toast('保存成功')
              this.back()
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.list{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  font-size: 15px;
  input{
    text-align: right;
    margin-right: 5px;
    border: none;
  }
}
.bottom{
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  button{
    width: 95%;
    height: 44px;
    border-radius: 20px;
    border: none;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
  }
}
</style>
